<template>
	<view class="content">
		<image class="bg-image" mode="scaleToFill" src="/static/bg.jpg"></image>
		<view class="top animate__animated animate__backInDown">
			<!-- <text class="text-tip">峨眉山电子路单</text> -->
			<selfImg class="img-title" radius="0" src="/static/title.png"></selfImg>
			<selfImg class="img-icon" src="/static/icon.png"></selfImg>
		</view>
		<view class="bottom animate__animated animate__backInUp">
			<button class="btn-login" type="primary" open-type="getPhoneNumber" @getphonenumber="btnWxLogin">微信登录</button>
			<text class="text-account" @click="accountLogin">输入账号登录</text>
		</view>
	</view>
</template>

<script>
import indexjs from '@/api/index.js';
import common from '@/utils/common.js';
import selfImg from '@/components/selfImg.vue';
export default {
	data() {
		return {};
	},
	components: { selfImg },
	async onLoad() {},
	methods: {
		accountLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		async btnWxLogin(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				let res = await indexjs.getPhoneByWxCode(e.detail.code);
				if (common.httpIsWrong(res)) return;
				let userinfo = res.json.data.data;
				let that = this;
				uni.showToast({
					icon: 'none',
					title: userinfo.userPhone + '-登陆成功',
					success() {
						setTimeout(() => {
							that.$store.dispatch('initUserInfo', userinfo);
							that.$store.dispatch('loadGlobalData');
							//页面跳转
							that.$store.dispatch('roleToPage');
						}, 500);
					}
				});
			} else {
				uni.$u.toast('您点击了拒绝');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	.bg-image {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 0;
	}
	.top {
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		.text-tip {
			color: white;
			font-size: 56rpx;
			font-weight: bold;
		}
		.img-title {
			width: 600rpx;
			height: 92rpx;
		}
		.img-icon {
			margin-top: 100rpx;
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
		}
	}
	.bottom {
		z-index: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.btn-login {
			width: 70%;
			background-color: white;
			color: #4593da;
			font-weight: bold;
		}
		.text-account {
			color: white;
			margin-top: 50rpx;
		}
	}
}
</style>
